<script setup lang="ts">
import router from '@/router';
import { reactive,computed } from 'vue';
import { register } from '@/request/userRequest';
import { ElMessage } from 'element-plus';
import { judgeDataIsNull,judgeDataIsNotNull } from '@/tools/normal';

    const form = reactive({
      nickName: null,
      userAccount: null,
      password:null,
      passwordAgain:null,
      userAccountEnable:null
    })

    const disabled =computed(()=>{
      return judgeDataIsNull(form.userAccount)|| judgeDataIsNull(form.password) || (form.password!=form.passwordAgain);
    })

    const onSubmit=function(){
      register(form.userAccount,form.password,form.nickName)
      .then((result)=>{
        //成功则提示“注册成功”，并跳转登录页
        let message = result.data.detail ||'注册成功' ;
                  ElMessage.success(message);
        router.push('/login');
      });
      // ,error=>{
      //   //失败则提示创建失败的原因，并停留注册页
      //   (judgeDataIsNotNull(error.response.data)&&judgeDataIsNotNull(error.response.data.stateMessage))?
      //   ElMessage(error.response.data.stateMessage):ElMessage("注册失败")
      // });
    }
 
    const onCancel = function(){
      router.push('/');
    }
</script>

<template>
    <!-- topbar会判断用户是否登录，若已登录，显示用户昵称；如没登录，显示登录、注册
    -->
  <main>
 
    <el-form :model="form" label-width="120px" class="my_form" >
      <el-form-item label="昵称" required="true">
        <el-input v-model="form.nickName"   style="width:var(--my_form_input_width)"/>
      </el-form-item>
      <el-form-item label="用户名" required="true">
        <el-input v-model="form.userAccount"   style="width:var(--my_form_input_width)"/>
      </el-form-item>
      <el-form-item label="密码" required="true"  >
        <el-input v-model="form.password" type="password"  show-password 
        style="width:var(--my_form_input_width)"/>
      </el-form-item>
      <el-form-item label="再次输入密码" required="true">
        <el-input v-model="form.passwordAgain"  type="password"  show-password
        style="width:var(--my_form_input_width)"/>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit" :disabled="disabled">确定注册</el-button>
        <el-button @click="onCancel">取消</el-button>
      </el-form-item>

    </el-form>
  </main>
</template>

<style scoped>
</style>